<template>
  <div class="firstPage">
    <div class="title">系统设置 / 首页管理</div>
    <el-tabs class="firstPage_main" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="事件管理" name="first">
        <el-button class="add" type="primary" size="small" @click="add('event')">新增</el-button>
        <div class="event">
          <tableArea
              :label-map="eventLabelMap"
              :table-data="eventTableData"
              :total="eventTotal"
              :page="eventQueryList.page"
              :limit="eventQueryList.pagesize"
              @pagination="handleEventPagination"
              @edit="eventEdit"
              @delete="eventDelete"
          ></tableArea>
        </div>
      </el-tab-pane>
      <el-tab-pane label="新闻管理" name="second">
        <el-button class="add" type="primary" size="small" @click="add('news')">新增</el-button>
        <div class="event">
          <tableArea
              :label-map="newsLabelMap"
              :table-data="newsTableData"
              :total="newsTotal"
              :page="newsQueryList.page"
              :limit="newsQueryList.pagesize"
              @pagination="handleNewsPagination"
              @edit="newsEdit"
              @delete="newsDelete"
          ></tableArea>
        </div>
      </el-tab-pane>
      <el-tab-pane label="轮播图片" name="third">
        <el-button class="add" type="primary" size="small" @click="add('tabPic')">新增</el-button>
        <div class="event">
          <tableArea
              :label-map="tabPicLabelMap"
              :table-data="tabPicTableData"
              :page="0"
              :limit="0"
              :total="0"
              @edit="tabPicEdit"
              @delete="tabPicDelete"
          ></tableArea>
        </div>
      </el-tab-pane>
      <el-tab-pane label="研究方向" name="fourth">
        <el-button class="add" type="primary" size="small" @click="add('research')">新增</el-button>
        <div class="event">
          <tableArea
              :label-map="researchDirecLabelMap"
              :table-data="researchDirecTableData"
              :total="researchDirecTotal"
              :page="researchDirecQueryList.page"
              :limit="researchDirecQueryList.pagesize"
              @pagination="handleResearchPagination"
              @edit="researchDirecEdit"
              @delete="researchDirecDelete"
              @addArticle="researchAddArticle"
          ></tableArea>
        </div>
      </el-tab-pane>
      <el-tab-pane label="领导致辞" name="fifth">
        <leaderSpeak></leaderSpeak>
      </el-tab-pane>
      <el-tab-pane label="实验室介绍" name="sixth">
        <labInfo></labInfo>
      </el-tab-pane>
      <el-tab-pane label="招聘信息" name="seventh">
        <employ-info></employ-info>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
        class="eventDia"
        :title="eventType === 'add' ? '新增事件': '修改事件信息'"
        :visible.sync="showEventAdd"
        @close="closeEvent"
        width="80%">
      <addEvents ref="eventRef" :eventInfo="addEventData" :operateType="eventType"></addEvents>
    </el-dialog>
    <el-dialog
        class="eventDia"
        :title="newsType === 'add' ? '新增新闻' : '修改新闻信息'"
        :visible.sync="showNewsAdd"
        @close="closeNews"
        width="80%">
      <addNews ref="newsRef"  @updateTable="updateTableNews" :newsInfo="addNewsData" :operateType="newsType"></addNews>
    </el-dialog>
    <el-dialog
        class="eventDia"
        :title="tabPicType === 'add' ? '新增轮播图片': '修改轮播图片信息'"
        :visible.sync="showTabPicAdd"
        @close="closeTabPic"
        width="80%">
      <addTabPicData ref="tabPicRef" @updateTable="updateTableTabPic" :tabPicInfo="addTabPicInfo" :operateType="tabPicType"></addTabPicData>
    </el-dialog>
    <el-dialog
        class="eventDia"
        :title="researchType === 'add' ? '新增研究方向': '修改研究方向信息'"
        :visible.sync="showResearchAdd"
        @close="closeResearch"
        width="80%">
      <addResearch ref="researchRef" @updateTable="updateTableResearch" :researchInfo="researchInfo" :operateType="researchType"></addResearch>
    </el-dialog>
  </div>
</template>

<script>
  import tableArea from '../components/tableArea'
  import leaderSpeak from '../components/leaderSpeak'
  import employInfo from '../components/employInfo'
  import labInfo from '../components/labInfo'
  import addEvents from './eventAdd/addEvents/index'
  import addNews from './addNews/index'
  import addTabPicData from './addTabPicData/index'
  import addResearch from './addResearch/index'
  import { getEventList, deleteEvent, deleteNews,
    getNewsList, getNewsItem, getIndexPicList, deleteIndexPic,
    getResearchList, deleteResearch, getEventItem, getResearchItem
  } from '@/api/eventManage'
  export default {
    data() {
      return {
        eventType: 'add',
        newsType: 'add',
        tabPicType: 'add',
        researchType: 'add',
        showTabPicAdd: false,
        showNewsAdd: false,
        showEventAdd: false,
        showResearchAdd: false,
        activeName: 'first',
        addTabPicInfo: {
          flag: '1'
        },
        addEventData: {},
        addNewsData: {},
        eventLabelMap: [
          { label: '标题', prop: 'eventtitle' },
          { label: '事件时间', prop: 'eventdate' },
          { label: '时间地点', prop: 'address' },
          { label: '是否可见', prop: 'flag' },
          { label: '编辑/删除', prop: 'operation' },
        ],
        eventTableData: [],
        eventQueryList: {
          page: 1,
          pagesize: 10,
          eventtitle: '',
          eventtype: '',
          eventdate: ''
        },
        eventTotal: 0,
        newsLabelMap: [
          { label: '标题', prop: 'newstitle' },
          { label: '新闻日期', prop: 'newsdate' },
          { label: '是否可见', prop: 'flag' },
          { label: '编辑/删除', prop: 'operation' }
        ],
        newsTableData: [],
        newsQueryList: {
          page: 1,
          pagesize: 10,
          newstype: '',
          newstitle: '',
          newsdate: ''
        },
        newsTotal: 0,
        tabPicLabelMap: [
            { label: '标题', prop: 'title' },
            { label: '副标题', prop: 'subtitle' },
          { label: '图片', prop: 'picture' },
          { label: '是否可见', prop: 'flag' },
          { label: '编辑/删除', prop: 'operation' }
        ],
        tabPicTableData: [],
        tabPicTotal: 10,
        researchDirecLabelMap: [
          { label: '课题名称', prop: 'name' },
          { label: '研究方向简介', prop: 'introduction' },
          { label: '图片', prop: 'picture' },
          { label: '是否可见', prop: 'flag' },
          { label: '操作', prop: 'operation' }
        ],
        researchDirecTableData: [],
        researchDirecQueryList: {
          page: 1,
          pagesize: 10,
          name: ''
        },
        researchInfo: {
          flag: '1'
        },
        researchDirecTotal: 0,
      }
    },
    created() {
    },
    mounted() {
      // 获取事件列表
      this.getEventDataList()
      // 获取新闻列表
      this.getNewsDataList()
      // 获取轮播图片列表
      this.getTabPicDataList()
      // 获取研究方向列表
      this.getResearchDataList()

    },
    methods: {
      updateTableNews(){
        this.showNewsAdd = false
        this.getNewsDataList()
      },
      updateTableTabPic(){
        this.showTabPicAdd = false
        this.getTabPicDataList()
      },
      updateTableResearch(){
        this.showResearchAdd = false
        this.getResearchDataList()
      },
      closeEvent(){
        this.$refs.eventRef.eventForm = {
          eventid: '',
          eventtitle: '',
          eventtype: '',
          eventdate: '',
          address: '',
          reprintflag: '',
          eventtext: ''
        }
      },
      closeNews(){
        this.$refs.newsRef.newsForm = {
          newsid: '',
          newstitle: '',
          newsdate: '',
          newstype:'',
          newstext:'',
          reprintflag: '',
          topflag: '',
          flag: ''
        }
      },
      closeTabPic(){
        this.$refs.tabPicRef.tabPicForm = {
          id: '',
          picture: '',
          title: '',
          subtitle:'',
          flag: '0'
        }
      },
      closeResearch(){
        this.$refs.researchRef.researchForm = {
          id: '',
          name: '',
          introduction: '',
          picture:'',
          flag: '0'
        }
      },
      async getNewsDataList(){
        const res = await getNewsList(this.newsQueryList)
        this.newsTableData = res.rows.map((item)=>{
          item.operation =  ['编辑', '删除']
          return item
        })
        this.newsTotal = res.total
      },
      async getEventDataList(){
        const res = await getEventList(this.eventQueryList)
        this.eventTableData = res.rows.map((item)=>{
          item.operation =  ['编辑', '删除']
          return item
        })
        this.eventTotal = res.total
      },
      async getTabPicDataList(){
        const res = await getIndexPicList()
        this.tabPicTableData = res.rows.map((item)=>{
          item.operation =  ['编辑', '删除']
          return item
        })
        this.tabPicTotal = res.total
      },
      async getResearchDataList(){
        const res = await getResearchList(this.researchDirecQueryList)
        this.researchDirecTableData = res.rows.map((item)=>{
          item.operation =  ['编辑', '删除', '新增代表性文献']
          return item
        })
        this.researchDirecTotal = res.total
      },
      handleClick() {
        // console.log(tab, event);
      },
      add(type){
        switch (type) {
          case 'event':
            this.eventType = 'add'
            this.showEventAdd = true
            break;
          case 'news':
            this.newsType = 'add'
            this.showEventAdd = false
            this.showNewsAdd = true
            break;
          case 'tabPic':
            this.showTabPicAdd = true
            this.tabPicType = 'add'
            break;
          case 'research':
            this.showResearchAdd = true
            this.researchType = 'add'
            break;
        }
      },
      handleEventPagination(pages){
        this.eventQueryList.page = pages.page
        this.getEventDataList()
      },
      handleNewsPagination(pages){
        this.newsQueryList.page = pages.page
        this.getNewsDataList()
      },
      handleResearchPagination(pages){
        this.researchDirecQueryList.page = pages.page
        this.getResearchDataList()
      },
      async eventEdit(row){
        this.eventType = 'edit'
        // 获取事件详情
        const res = await getEventItem({eventid: row.eventid})
        this.addEventData = {
          eventid: res.eventid,
          eventtitle: res.eventtitle,
          eventdate: res.eventdate,
          address: res.address,
          reprintflag: res.reprintflag,
          eventtype: res.eventtype,
          eventtext: res.eventtext,
          starttime: res.starttime,
          endtime: res.endtime,
        }
        this.showEventAdd = true
        console.log(row)
      },
      async handleEventDelete(data){
        await deleteEvent({eventid: data.eventid})
        this.$message({
          type: 'success',
          message: '删除成功'
        });
        this.getEventDataList()
      },
      async handleNewsDelete(data){
        await deleteNews({newsid: data.newsid})
        this.$message({
          type: 'success',
          message: '删除成功'
        });
        this.getNewsDataList()
      },
      async handleTabPicDelete(data){
        await deleteIndexPic({id: data.id})
        this.$message({
          type: 'success',
          message: '删除成功'
        });
        this.getTabPicDataList()
      },
      async handleResearchDelete(data){
        await deleteResearch({researchid: data.researchid})
        this.$message({
          type: 'success',
          message: '删除成功'
        });
        this.getResearchDataList()
      },
      eventDelete(row){
        const _this = this
        this.$alert('确定删除吗', '警告', {
          confirmButtonText: '确定',
          callback: (action) => {
            console.log(action)
            if(action === 'confirm'){
              _this.handleEventDelete(row)
            }
          }
        });
      },
      async newsEdit(row){
        // 请求详情
        this.newsType = 'edit'
        const res = await getNewsItem({newsid: row.newsid})
        this.addNewsData = {
          newsid: res.newsid,
          newstitle: res.newstitle,
          newsdate: res.newsdate,
          newstype:res.newstype,
          newstext:res.newstext,
          reprintflag: res.reprintflag,
          topflag: res.topflag,
          flag: res.flag
        }
        this.showNewsAdd = true
      },
      newsDelete(row){
        const _this = this
        this.$alert('确定删除吗', '警告', {
          confirmButtonText: '确定',
          callback: (action) => {
            if(action === 'confirm'){
              _this.handleNewsDelete(row)
            }
          }
        });

      },
      tabPicEdit(row){
        this.tabPicType = 'edit'
        this.addTabPicInfo = {
          id: row.id,
          picture: row.picture,
          title: row.title,
          subtitle: row.subtitle,
          flag: row.flag
        }
        this.showTabPicAdd = true
      },
      tabPicDelete(row){
        const _this = this
        this.$alert('确定删除吗', '警告', {
          confirmButtonText: '确定',
          callback: (action) => {
            if(action === 'confirm'){
              _this.handleTabPicDelete(row)
            }
          }
        });
      },
      async researchDirecEdit(row){
        this.researchType = 'edit'
        // 获取课题详情
        const res = await getResearchItem({researchid: row.researchid})
        this.researchInfo = {
          researchid: res.researchid,
          name: res.name,
          introduction: res.introduction,
          picture: res.picture,
          flag: res.flag,
          articleResultList: res.articleResultList
        }
        this.showResearchAdd = true
      },
      researchDirecDelete(row){
        const _this = this
        this.$alert('确定删除吗', '警告', {
          confirmButtonText: '确定',
          callback: (action) => {
            if(action === 'confirm'){
              _this.handleResearchDelete(row)
            }
          }
        });
      },
      researchAddArticle(row){
        this.$router.push({
          path:'SystemManage/paperManage',
          query:{
            researchid: row.researchid
          }
        })
      }
    },
    computed: {},
    components: { tableArea, leaderSpeak, addEvents, addNews, addTabPicData, addResearch, labInfo, employInfo }
  }
</script>

<style lang="scss" scoped>
  .firstPage {
    .title{
      background:rgb(235,235,235);
      height: 50px;
      padding-left: 38px;
      padding-top: 22px;
      font-size: 18px;
      color: rgb(127,127,127);
    }
    .firstPage_main{
      min-width: 100%;
      margin-top: 20px;
      padding-left: 38px;
      /deep/ .el-tabs__item {
        padding: 0 40px;
        font-size: 16px;
      }
      .event{
        margin-top: 20px;
      }
    }
    /*/deep/ .eventDia .el-dialog__wrapper .el-dialog{*/
    /*  width: 80%;*/
    /*}*/
  }
</style>
